/** @author: duanhaijiao  @date 2022/7/5--12:21 **/

/* name: "tabSelect" */
<template>
    <div class="home-inform-top flex flex-align-center flex-space-between">
        <div class="home-inform-tab flex">
            <div class="home-inform-tab-item bold pointer" :class="tabindex == index?'tabactive':''"
                 @click="tabclick(chageId,tab)"
                 v-for="(tab,index) in tabs">
                {{tab.name}}
            </div>
        </div>
        <span class="home-inform-more pointer" @click="moreClick" v-if="hasMore==1">
                        更多+
        </span>
    </div>
</template>
<script>
    // @ is an alias to /src

    export default {
        name: "tabSelect",
        props: {
            hasMore: {
                type: String,
                default: '1'
            },
            chageId: {
                type: String,
                default: ''
            },
            tabs: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                tabindex: 0
            }
        },
        mounted() {
            console.log(this.tabs)
        },
        methods: {
            tabclick(chageId, data) {
                this.tabindex = this.tabs.indexOf(data)
                this.$emit('tabSelect', {id: chageId, data: data})
            },
            moreClick() {
                this.$store.state.detailId = '-1';
                let data = this.tabs[this.tabindex];
                this.$router.push('/pathPage/' + data.type + '/' + data.pid)
            }
        }
    };
</script>

<style scoped lang="scss">
    .home-inform-top {
        border-bottom: 1px solid #ccc;

        .home-inform-tab {
            align-items: flex-end;
        }

        .home-inform-tab-item {
            height: 46px;
            width: 160px;
            display: flex;
            color: #000;
            font-size: 22px;
            align-items: center;
            justify-content: center;
            background: linear-gradient(-90deg, rgba(40, 121, 202, 0.2) 0%, rgba(36, 87, 148, 0.4) 100%);
        }

        .home-inform-tab-item.tabactive {
            background: linear-gradient(-90deg, #2879CA 0%, #245794 100%);
            height: 50px;
            opacity: 1;
            color: #fff;
        }

        .home-inform-more {
            color: #666;
            font-size: 13px;
            margin-right: 10px;
        }
    }
</style>